import 'package:constellation/global.dart';
import 'package:constellation/http-manager.dart';
import 'package:constellation/widgets/avatar.dart';
import 'package:flutter/material.dart';

class LuckPage extends StatefulWidget {
  LuckPage({Key key, this.enName, this.code, this.index}) : super(key: key);
  final String enName;
  final String code;
  final index;

  @override
  _LuckPageState createState() => _LuckPageState();
}

class _LuckPageState extends State<LuckPage> {
  var _luckData;
  int active = 0;
  bool _loading = false;

  @override
  void initState() {
    constellationMatch(widget.enName, widget.code).then((res) {
      setState(() {
        _luckData = res;
      });
    });
    super.initState();
  }

  constellationMatch(String enName, String code) async {
    String url = "/constellation/fortune?en_name=$enName&code=$code";
    try {
      var response = await HttpUtils.request(url, method: HttpUtils.GET);
      return response['data'];
    } catch (e) {
      print(e);
    }
  }

  List<Widget> _getGradeStar(double score, int total) {
    List<Widget> _list = List<Widget>();
    for (var i = 0; i < total; i++) {
      double factor = (score - i);
      if (factor >= 1) {
        factor = 1.0;
      } else if (factor < 0) {
        factor = 0;
      }
      Stack _st = Stack(
        children: <Widget>[
          Icon(
            Icons.star,
            color: Colors.white.withOpacity(0.9),
            size: 20,
          ),
          ClipRect(
            child: Align(
              alignment: Alignment.topLeft,
              widthFactor: factor,
              child: Icon(
                Icons.star,
                color: Global.mainDarkColor,
                size: 20,
              ),
            ),
          )
        ],
      );
      _list.add(_st);
    }
    return _list;
  }

  List<Widget> tabs() {
    List<Widget> list = [];
    List<Map> items = [
      {'title': '今日运势'},
      {'title': '明日运势'},
      {'title': '本周运势'},
      {'title': '本月运势'},
      {'title': '本年运势'},
    ];

    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      list.add(
        InkWell(
          onTap: () {
            setState(() => {_loading = true});
            constellationMatch(widget.enName, i.toString()).then((res) {
              setState(() => {_luckData = res, active = i, _loading = false});
            });
          },
          child: Container(
            padding: EdgeInsets.fromLTRB(8, 5, 8, 5),
            margin: EdgeInsets.all(2),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  active == i
                      ? Global.mainDarkColor
                      : Global.mainColor.withOpacity(0.5),
                  active == i ? Global.mainDarkColor : Global.mainColor,
                ],
              ),
              borderRadius: BorderRadius.circular(100),
              boxShadow: [
                BoxShadow(
                  color: Color(0xFF000000).withOpacity(0.1),
                  offset: Offset(0, 5),
                  blurRadius: 5,
                  spreadRadius: 1,
                )
              ],
            ),
            child: Center(
              child: Text(
                item['title'],
                style: TextStyle(
                  color: Global.backgroundColor,
                  fontSize: 13,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _luckData == null
        ? Container(
            color: Global.backgroundColor,
            child: Center(child: CircularProgressIndicator()),
          )
        : Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(color: Global.backgroundColor),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      height: Global.paddingTop + 330,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [
                            Global.mainColor,
                            Global.mainColor.withOpacity(0.3),
                          ],
                        ),
                      ),
                      child: Stack(
                        children: [
                          Positioned(
                            top: Global.paddingTop + 20,
                            left: 0,
                            right: 0,
                            child: Column(
                              children: [
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    SizedBox(width: 20),
                                    Avatar(sex: 2, index: widget.index),
                                    SizedBox(width: 20),
                                    Expanded(
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              Text(
                                                _luckData['name'],
                                                style: TextStyle(
                                                  fontSize: 19,
                                                  fontWeight: FontWeight.w600,
                                                  color: Global.backgroundColor,
                                                ),
                                              ),
                                              SizedBox(width: 10),
                                              InkWell(
                                                onTap: () {
                                                  Navigator.of(context).pop();
                                                },
                                                child: Container(
                                                  padding: EdgeInsets.fromLTRB(
                                                      10, 3, 10, 3),
                                                  decoration: BoxDecoration(
                                                    border: Border.all(
                                                        color: Global
                                                            .backgroundColor,
                                                        width: 0.5),
                                                    color: Global
                                                        .backgroundColor
                                                        .withOpacity(0.2),
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            20),
                                                  ),
                                                  child: Center(
                                                    child: Text(
                                                      "查看其它星座",
                                                      style: TextStyle(
                                                        color: Global
                                                            .backgroundColor,
                                                        fontSize: 12,
                                                        fontWeight:
                                                            FontWeight.w500,
                                                      ),
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                          SizedBox(height: 2),
                                          Text(
                                            _luckData['luck'],
                                            style: TextStyle(
                                              fontSize: 13,
                                              fontWeight: FontWeight.w500,
                                              color: Color(0xFFF76618),
                                            ),
                                          ),
                                          SizedBox(height: 2),
                                          Text(
                                            _luckData['advice'],
                                            style: TextStyle(
                                              fontSize: 17,
                                              fontWeight: FontWeight.w500,
                                              color: Global.backgroundColor
                                                  .withOpacity(0.7),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                                SizedBox(height: 10),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: tabs(),
                                ),
                                SizedBox(height: 25),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Text(
                                      "综合运势 ",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.w500,
                                        color: Global.backgroundColor,
                                      ),
                                    ),
                                    Container(
                                      width: 100,
                                      child: Row(
                                        children: _getGradeStar(
                                            double.parse(_luckData['luckList']
                                                    [0]
                                                .toString()),
                                            5),
                                      ),
                                    ),
                                    SizedBox(width: 20),
                                    Text(
                                      "爱情运势 ",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.w500,
                                        color: Global.backgroundColor,
                                      ),
                                    ),
                                    Container(
                                      width: 100,
                                      child: Row(
                                        children: _getGradeStar(
                                            double.parse(_luckData['luckList']
                                                    [1]
                                                .toString()),
                                            5),
                                      ),
                                    ),
                                  ],
                                ),
                                SizedBox(height: 15),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Text(
                                      "事业运势 ",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.w500,
                                        color: Global.backgroundColor,
                                      ),
                                    ),
                                    Container(
                                      width: 100,
                                      child: Row(
                                        children: _getGradeStar(
                                            double.parse(_luckData['luckList']
                                                    [2]
                                                .toString()),
                                            5),
                                      ),
                                    ),
                                    SizedBox(width: 20),
                                    Text(
                                      "财富运势 ",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.w500,
                                        color: Global.backgroundColor,
                                      ),
                                    ),
                                    Container(
                                      width: 100,
                                      child: Row(
                                        children: _getGradeStar(
                                            double.parse(_luckData['luckList']
                                                    [3]
                                                .toString()),
                                            5),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child: Container(
                              width: MediaQuery.of(context).size.width,
                              child: Image.asset('assets/images/cloud1.png'),
                            ),
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child: Container(
                              width: MediaQuery.of(context).size.width,
                              child: Image.asset('assets/images/cloud2.png'),
                            ),
                          ),
                          _loading
                              ? Positioned(
                                  top: 0,
                                  left: 0,
                                  right: 0,
                                  bottom: 0,
                                  child: Container(
                                    color:
                                        Global.backgroundColor.withOpacity(0.8),
                                    width: MediaQuery.of(context).size.width,
                                    child: Image.network(
                                        'https://img.lanrentuku.com/img/allimg/1212/5-121204193935-51.gif'),
                                  ),
                                )
                              : Container(),
                        ],
                      ),
                    ),
                    Text(
                      '综合运势',
                      style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.w500,
                        color: Global.mainColor,
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(15),
                      child: Text(
                        "　　${_luckData['article'][0]}",
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Global.fontColor,
                          height: 2.3,
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Text(
                      '爱情运势',
                      style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.w500,
                        color: Global.mainColor,
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(15),
                      child: Text(
                        "　　${_luckData['article'][1]}",
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Global.fontColor,
                          height: 2.3,
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Text(
                      '事业运势',
                      style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.w500,
                        color: Global.mainColor,
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(15),
                      child: Text(
                        "　　${_luckData['article'][2]}",
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Global.fontColor,
                          height: 2.3,
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Text(
                      '财富运势',
                      style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.w500,
                        color: Global.mainColor,
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(15),
                      child: Text(
                        "　　${_luckData['article'][3]}",
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Global.fontColor,
                          height: 2.3,
                        ),
                      ),
                    ),
                    SizedBox(height: 40),
                  ],
                ),
              ),
            ),
          );
  }
}
